@width: 300px;

.box {
  // 禁止less编译 因为在less下运算会自动给你计算 不符合想要的预期结果
  // less 自动编译后的结果是 width: calc(300px - 50%);
  width: calc(@width - 50%);
  height: calc(100px -20px);
  padding: ~'@width - 20'; // padding: @width - 20; // 也叫转义
}

.box2 {
  width: calc(@width - ~'50%');
  height: calc(@width - 50);
  padding: calc(@width - 50px);
}

// less 在本次测试中 发现 calc计算函数中调用运算时less没有再帮我们运算一次 符合预期（以往less是有这个问题的，会输出不符合一起的结果）
// 如发现此问题 此使用~忽略编译

// 为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。
.box3 {
  @var: 50vh/2;
  width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))
}

// 转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出
@min768: ~'(min-width: 768px)';
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

// 注意，从 Less 3.5 开始，可以简写为：以下写法为简写 是正确的
// 在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了
@min888: (min-width: 768px);
.element {
  @media @min888 {
    font-size: 1.2rem;
  }
}
